<template>
  <div class="overview-content" :style="{height:gkHeight + 'px', 'overflow-y': 'auto'}">
    <div class="overview-gs">
      <div class="top-title">
        <img src="../../../../static/project/top.png" alt="" />
        <div>项目概述</div>
      </div>
      <div class="item-gs">
        <div class="content-gs">
          <span>编号</span>
          <span>{{ detailData.projectNumber }}</span>
        </div>
        <div class="content-gs">
          <span>地点</span>
          <span v-if="detailData.passingUnit == null || detailData.passingUnit == ''">--</span>
          <span v-else>{{ detailData.passingUnit }}</span>
        </div>
        <div class="content-gs">
          <span>商务负责人</span>
          <span v-if="detailData.projectMyBusinessHeadName == null">--</span>
          <span v-else>{{ detailData.projectMyBusinessHeadName }}</span>
        </div>
        <div class="content-gs">
          <span>技术负责人</span>
          <span v-if="detailData.projectMyTechnologyHeadName == null">--</span>
          <span v-else>{{ detailData.projectMyTechnologyHeadName }}</span>
        </div>
        <div class="content-gs">
          <span>计划开始时间</span>
          <span v-if="detailData.planStartDate == null || detailData.planStartDate == ''">--</span>
          <span v-else>{{ detailData.planStartDate | timeFormat }}</span>
        </div>
        <div class="content-gs">
          <span>计划结束时间</span>
          <span v-if="detailData.planEndDate == null || detailData.planEndDate == ''">--</span>
          <span v-else>{{ detailData.planEndDate | timeFormat }}</span>
        </div>
      </div>
    </div>
    <div v-show="showLC" class="overview-iteration">
      <div class="iteration-title">
        <div class="iteration-left">
          <img src="../../../../static/project/topThree.png" alt="" />
          <div>里程列表</div>
        </div>
        <div class="iteration-right">
          <div>更多</div>
          <img src="../../../../static/me/arrow-right.png" alt="" />
        </div>
      </div>
      <div style="height: 160px;overflow-y: auto;">
        <div v-for="(item, index) in detailData.milestoneRespVO" :key="index">
          <div class="item-lc">
            <div class="content-lc">
              <span>里程名称</span>
              <span>{{ item.name }}</span>
            </div>
            <div class="content-lc">
              <span>计划开始时间</span>
              <span v-if="item.begin == null || item.begin == ''">--</span>
              <span v-else>{{ item.begin }}</span>
            </div>
            <div class="content-lc">
              <span>计划结束时间</span>
              <span v-if="item.end == null || item.end == ''">--</span>
              <span v-else>{{ item.end }}</span>
            </div>
            <div class="content-lc">
              <span>里程状态</span>
              <view v-if="item.status == '0'" class="status">
                <view class="status-color" />
                <view class="font-color">
                  未开始
                </view>
              </view>
              <view v-else-if="item.status == '1'" class="status">
                <view class="status-colorTwo" />
                <view class="font-colorTwo">
                  进行中
                </view>
              </view>
              <view v-else-if="item.status == '2'" class="status">
                <view class="status-colorThree" />
                <view class="font-colorThree">
                  已挂起
                </view>
              </view>
              <view v-else class="status">
                <view class="status-colorFourth" />
                <view class="font-colorFourth">
                  已关闭
                </view>
              </view>
            </div>
            <div class="content-lc">
              <span>备注</span>
              <span v-if="item.remark == null || item.remark == ''">--</span>
              <span v-else>{{ item.remark }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <iteration :iterat-list="iteratList" /> -->
    </div>
    <div class="overview-top">
      <div class="top-title">
        <img src="../../../../static/project/top.png" alt="" />
        <div>项目统计</div>
      </div>
      <overview :info-data="infoData" />
    </div>
  </div>
</template>

<script>
import overview from './component/overview.vue'
import { getDeviceInfo } from '@/utils/storage'
import { formatTimestamp } from '@/utils/format'
import { getDetail } from '@/apis/project'

export default {
  filters: {
    timeFormat(value) {
      return formatTimestamp(value)
    },
  },
  components: { overview },
  props: {
    infoData: {
      type: Object,
    },
  },
  data() {
    return {
      gkHeight: 0,
      overviewList: [
        {
          title: '投入',
          titleOne: '总人数',
          numOne: '14',
          titleTwo: '预计工时',
          numTwo: '2220',
          titleThree: '已消耗',
          numThree: '3300',
        },
        {
          title: '需求数',
          titleOne: '总研发需求',
          numOne: '3',
          titleTwo: '已完成',
          numTwo: '0',
          titleThree: '剩余',
          numThree: '3',
        },
        {
          title: '任务数',
          titleOne: '已完成',
          numOne: '226',
          titleTwo: '进行中',
          numTwo: '10',
          titleThree: '未开始',
          numThree: '50',
        },
        {
          title: 'Bug数',
          titleOne: '总Bug数',
          numOne: '716',
          titleTwo: '已解决',
          numTwo: '10',
          titleThree: '未解决',
          numThree: '17',
        },
      ],
      showLC: false,
      iterationList: [
        {
          title: '迭代',
          titleOne: '所有迭代',
          numOne: '6',
          titleTwo: '进行中的迭带',
          numTwo: '1',
          titleThree: '累计迭代',
          numThree: '5',
        },
      ],
      detailData: {},
      iteratList: [],
      active: -1,
    }
  },
  created() {
  },
  mounted() {
    // uni.$on('XMGS', (xmgsdata) => {
    //   this.detailData = xmgsdata
    //   if (this.detailData.milestoneRespVO.length > 0) {
    //     this.showLC = true
    //   }
    //   // 获取仪表盘信息
    //   // this.getYiBiaoPanInfo(xmgsdata)
    //   console.log(xmgsdata, '项目概述基本信息')
    // })
    this.getDetail()
    this.setHeight()
  },
  methods: {
    async getDetail() {
      const res = await getDetail(this.infoData.id)
      this.detailData = res
    },
    setHeight() {
      const { screenHeight, statusBarHeight, navbarHeight } = getDeviceInfo()
      this.gkHeight = screenHeight - statusBarHeight - navbarHeight
    },
    // 获取仪表盘信息
    async getYiBiaoPanInfo(data) {
      // const params = {
      //   id: data.id,
      // }
      // const res = await getYiBiaopanInfo(params)
      // console.log(res, '仪表盘信息')
    },
  },
}
</script>
<style lang="scss" scoped>
.overview-content {
  padding-top: 10px;
  margin-bottom: 10px;
  align-items: center;
  display: flex;
  flex-flow: column;
  // height: 100%;
  overflow-y: auto;
  .overview-gs {
    width: 93%;
    height: 220px;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .top-title {
      background: linear-gradient(
        270deg,
        rgba(171, 205, 231, 0) 0%,
        #e7efff 100%
      );
      border-radius: 2px 2px 0px 0px;
      display: flex;
      padding: 8px 0px;
      align-items: center;
      img {
        margin-left: 10px;
        width: 16px;
        height: 16px;
      }
      div {
        font-size: 12px;
        font-weight: 600;
        color: #000000;
        margin-left: 5px;
      }
    }
    .item-gs {
      margin: 8px 8px;
      background-color: #f9f9f9;
      padding: 8px 12px;
      .content-gs {
        display: flex;
        justify-content: space-between;
        line-height: 26px;
      }
    }
  }
  .overview-top {
    width: 93%;
    height: 410px;
    margin: 0 auto;
    margin-bottom: 210px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .top-title {
      background: linear-gradient(
        270deg,
        rgba(171, 205, 231, 0) 0%,
        #e7efff 100%
      );
      border-radius: 2px 2px 0px 0px;
      display: flex;
      padding: 8px 0px;
      align-items: center;
      img {
        margin-left: 10px;
        width: 16px;
        height: 16px;
      }
      div {
        font-size: 12px;
        font-weight: 600;
        color: #000000;
        margin-left: 5px;
      }
    }
  }
  .overview-topTwo {
    width: 93%;
    height: 99px;
    margin: 18px auto;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .topTwo-title {
      background: linear-gradient(
        270deg,
        rgba(255, 251, 245, 0) 0%,
        #fff6e7 100%
      );
      border-radius: 2px 2px 0px 0px;
      display: flex;
      justify-content: space-between;
      padding: 8px 0px;
      align-items: center;
      margin-bottom: 10px;
      .topTwo-left {
        display: flex;
        img {
          margin-left: 10px;
          width: 16px;
          height: 16px;
        }
        div {
          font-size: 12px;
          font-weight: 600;
          color: #000000;
          margin-left: 5px;
        }
      }
      .topTwo-right {
        display: flex;
        div {
          font-size: 11px;
          font-weight: 400;
          color: #999999;
        }
        img {
          width: 16px;
          margin-left: 10px;
          height: 16px;
        }
      }
    }
  }
  .overview-iteration {
    width: 93%;
    height: 280px;
    // overflow-y: auto;
    // height: auto;
    margin-bottom: 10px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .item-lc {
      margin: 8px 8px;
      background-color: #f4f4f4;
      padding: 8px 12px;
      .content-lc {
        display: flex;
        justify-content: space-between;
        line-height: 26px;
      }
      .list-status {
        display: flex;
        justify-content: space-between;
        line-height: 26px;
        .status {
          display: flex;
          flex-direction: row;
          align-items: center;
          .status-color {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #cccccc;
          }
          .font-color {
            margin-left: 6px;
            color: #cccccc;
            font-weight: 550;
          }
          .status-colorTwo {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #739eca;
          }
          .font-colorTwo {
            margin-left: 6px;
            color: #739eca;
            font-weight: 550;
          }
          .status-colorThree {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #04cb64;
          }
          .font-colorThree {
            margin-left: 6px;
            color: #04cb64;
            font-weight: 550;
          }
          .status-colorFourth {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #999;
          }
          .font-colorFourth {
            margin-left: 6px;
            color: #999;
            font-weight: 550;
          }
        }
      }
    }
    .iteration-title {
      background: linear-gradient(270deg, #f5fdff 0%, #e7fbff 100%);
      border-radius: 2px 2px 0px 0px;
      display: flex;
      justify-content: space-between;
      padding: 8px 0px;
      align-items: center;
      margin-bottom: 10px;
      .iteration-left {
        display: flex;
        img {
          margin-left: 10px;
          width: 16px;
          height: 16px;
        }
        div {
          font-size: 12px;
          font-weight: 600;
          color: #000000;
          margin-left: 5px;
        }
      }
      .iteration-right {
        display: flex;
        div {
          font-size: 11px;
          font-weight: 400;
          color: #999999;
        }
        img {
          width: 16px;
          margin-left: 10px;
          height: 16px;
        }
      }
    }
  }
  .overview-news {
    width: 93%;
    margin-bottom: 25px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .news-title {
      background: linear-gradient(
        270deg,
        rgba(255, 250, 250, 0) 0%,
        #ffe8e8 100%
      );
      border-radius: 2px 2px 0px 0px;
      display: flex;
      justify-content: space-between;
      padding: 8px 0px;
      align-items: center;
      margin-bottom: 10px;
      .news-left {
        display: flex;
        img {
          margin-left: 10px;
          width: 16px;
          height: 16px;
        }
        div {
          font-size: 12px;
          font-weight: 600;
          color: #000000;
          margin-left: 5px;
        }
      }
      .news-right {
        display: flex;
        div {
          font-size: 11px;
          font-weight: 400;
          color: #999999;
        }
        img {
          width: 16px;
          margin-left: 10px;
          height: 16px;
        }
      }
    }
    .news-content {
      margin-bottom: 10px;
    }
  }
}
</style>
